<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>海拥 | Weather.io</title>
    <link rel="icon" href="icon.png">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link
        href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,400;0,500;0,600;0,700;0,800;0,900;1,800&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="css/style.css" />
    <script src="js/script.js" defer></script>
</head>

<body onload="myFunction()">
    <div id="loading"></div>
    <div class="cont">
        <div class="one">
            <h1>🌦️ Weather.io ☔️</h1>
        </div>
    </div>
    <div class="two">
        <div class="card">
            <div class="search">
                <input type="text" class="search-bar" placeholder="Search" />
                <button>
                    <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" height="1em"
                        width="1.5em" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd"
                            d="M10.442 10.442a1 1 0 011.415 0l3.85 3.85a1 1 0 01-1.414 1.415l-3.85-3.85a1 1 0 010-1.415z"
                            clip-rule="evenodd"></path>
                        <path fill-rule="evenodd"
                            d="M6.5 12a5.5 5.5 0 100-11 5.5 5.5 0 000 11zM13 6.5a6.5 6.5 0 11-13 0 6.5 6.5 0 0113 0z"
                            clip-rule="evenodd"></path>
                    </svg>
                </button>
            </div>
            <div class="weather loading">
				<div class="other">注意：请输入城市名拼音，首字母大写</div>
                <h2 class="city">Weather in Shanghai</h2>
                <h1 class="temp">21°C</h1>
                <div class="flex">
                    <img src="https://openweathermap.org/img/wn/04d.png" alt="" class="icon" />
                    <div class="description">多云</div>
                </div>
                <div class="other">
                    <div class="humidity">湿度: 60%</div>
                    <div class="wind">风速: 6.2 km/h</div>
                </div>
            </div>
        </div>
    </div>
    <div class="three">
        <div class="name"><a href="https://haiyong.blog.csdn.net/">~ Haiyong</a></div>
    </div>
    <script>
        var preloader = document.getElementById('loading');
        function myFunction() {
            preloader.style.display = 'none';
        }
    </script>
    <script type="text/javascript" src="js/vanilla-tilt.js"></script>
    <script type="text/javascript">
        VanillaTilt.init(document.querySelector(".card"), {
            max: 15,
            glare: true,
            reverse: true,
            "max-glare": 0.5,
            speed: 400
        });
        VanillaTilt.init(document.querySelectorAll(".card"));
    </script>
</body>
